{% extends 'movie/base.html' %}
{% block content %}
    <style>
     #frame_full {
    height: calc(100% + 1000px);
}
        .item {
            display: block;
            float: left;
            font-size: 15px;
            text-align: center;
            margin: 0 25px 10px 0;
            width: 200px;
        }

        .item .poster_div {
            height: 320px;
            overflow: hidden;
        }
    </style>
    <!--展示电影图片用-->
    <div class="container">
        {% for movie in movies %}
            <a href="{% url 'movie:detail' movie.pk %}" class="item">
                <div class="poster_div">
                    <img src="/static/movie/img/{{ movie.imdb_id }}.jpg" alt="">
                    <p style="color: #ffffff;font-size: 20px;">{{ movie.name }}<br>
                        <strong style="color:#ffffff">评分{{ movie.get_score }}</strong>
                    </p>
                </div>
            </a>
        {% endfor %}
    </div>

    <!-- nav视图分页用-->
    <nav style="text-align: center;">
        <ul class="pagination">
            {#previous page#}
            {% if page_obj.has_previous %}
                <li><a href="{% url 'movie:hot' %}?p={{ page_obj.previous_page_number }}">上一页</a></li>
            {% else %}
                <li class="disabled"><a href="javascript:void(0);">上一页</a></li>
            {% endif %}

            {% if left_has_more %}
                <li><a href="{% url 'movie:hot' %}?p=1">1</a></li>
                <li><a href="javascript:void(0)">...</a></li>
            {% endif %}

            {#        左边的page#}
            {% for left_page in left_pages %}
                <li><a href="{% url 'movie:hot' %}?p={{ left_page }}">{{ left_page }}</a></li>
            {% endfor %}

            {#    当前的page#}
            <li class="active"><a href="javascript:void(0);">{{ current_page }}</a></li>

            {#     右边的page#}
            {% for right_page in right_pages %}
                <li><a href="{% url 'movie:hot' %}?p={{ right_page }}">{{ right_page }}</a></li>
            {% endfor %}
            {% if right_has_more %}
                <li><a href="javascript:void(0)">...</a></li>
                <li><a href="{% url 'movie:hot' %}?p={{ paginator.num_pages }}">{{ paginator.num_pages }}</a></li>
            {% endif %}
            {#next page#}
            {% if page_obj.has_next %}
                <li><a href="{% url 'movie:hot' %}?p={{ page_obj.next_page_number }}">下一页</a></li>
            {% else %}
                <li class="disabled"><a href="javascript:void(0);">上一页</a></li>
            {% endif %}
        </ul>
    </nav>

{% endblock %}